import React, {useEffect, useRef, useState} from "react";
import {Card, Col, List, Row, Typography} from "antd";
import MyIcon from "@comps/MyIcon";
import * as echarts from "echarts";

import './index.less';

function Home() {
    const echartsRef = useRef(null);
    const echartsOfzxRef = useRef(null);
    const logRef = useRef(null);
    
    const [logData, setLogData] = useState([
            {id: 1, data: '2023-05-01 10:00:00', content: '日志：《前1开发》'},
            {id: 2, data: '2023-05-01 10:00:00', content: '日志：《前2端开发》'},
            {id: 3, data: '2023-05-01 10:00:00', content: '日志：《前3端开发》'},
            {id: 4, data: '2023-05-01 10:00:00', content: '日志：《前4端开发》'}
        
        ]
    )
    
    useEffect(() => {
        const myChart = echarts.init(echartsRef.current);
        const zxChart = echarts.init(echartsOfzxRef.current);
        myChart.setOption(option);
        zxChart.setOption(zxOption);
        window.addEventListener("resize", () => {
            myChart.resize();
            zxChart.resize();
        });
    });
    
    const zxOption = {
        xAxis: {type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},
        yAxis: {type: 'value'},
        grid: {top: "15%", bottom: "15%", left: "8%", right: "8%"},
        series: [{data: [150, 230, 224, 218, 135, 147, 260], type: 'line'}]
    };
    
    const option = {
        tooltip: {trigger: 'item'},
        textStyle: {fontSize: 16},
        legend: {top: '5%', left: 'center'},
        series: [{
            name: '分类标签',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {show: false, position: 'center'},
            emphasis: {label: {show: true, fontSize: 24, fontWeight: 'bold'}},
            labelLine: {show: false},
            data: [
                {value: 1048, name: '前端'},
                {value: 735, name: 'JavaScript'},
                {value: 580, name: 'React'},
                {value: 484, name: 'Echarts'},
                {value: 300, name: 'Vue'}
            ]
        }]
    };
    
    return (
        <>
            <Row style={{height: "100%"}} gutter={[16, 16]}>
                {/*左边列*/}
                <Col span={10} style={{display: "flex", flexDirection: "column", height: "100%"}}>
                    {/* 顶部行 */}
                    <Row gutter={[16, 16]} style={{marginBottom: 16}}>
                        <Col span={12}>
                            <Card className="left-up-card">
                                <MyIcon style={{fontSize: 24}} type={"icon-wendangzongshuliang"}/>
                                <span className="number">文档数：<span>142</span></span>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card className="left-up-card">
                                <MyIcon style={{fontSize: 24}} type={"icon-liulan"}/>
                                <span className="number">浏览量：<span>231</span></span>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card className="left-up-card">
                                <MyIcon style={{fontSize: 24}} type={"icon-like"}/>
                                <span className="number">点赞量：<span>432</span></span>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card className="left-up-card">
                                <MyIcon style={{fontSize: 24}} type={"icon-comment"}/>
                                <span className="number">评论数：<span>534</span></span>
                            </Card>
                        </Col>
                    </Row>
                    {/* 底部行 */}
                    <Row gutter={[16, 16]} style={{flexGrow: 1}}>
                        <Col span={24}>
                            <Card className="left-up-card echarts">
                                <div ref={echartsRef}/>
                            </Card>
                        </Col>
                    </Row>
                </Col>
                {/*右边列*/}
                <Col span={14}>
                    <Row gutter={[16, 16]} style={{height: "100%", minHeight: 216}}>
                        <Col span={24}>
                            <Card className="left-up-card echarts">
                                <div ref={echartsOfzxRef}/>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card className="left-up-card" style={{height: "100%"}}>
                                {/* 滚动列表 */}
                                <List
                                    ref={logRef}
                                    style={{
                                        overflow: 'hidden'
                                    }}
                                    className="log-list"
                                >
                                    {logData.map((item) => (
                                        <List.Item key={item.id} className="log-item">
                                            {item.content}
                                        </List.Item>
                                    ))}
                                </List>
                            </Card>
                        </Col>
                        <Col span={12}><Card className="left-up-card" style={{height: "100%"}}></Card></Col>
                    </Row>
                </Col>
            </Row>
        </>
    );
}

export default Home;
